<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="userinfo">
      <p style="font-size: 30px">用户信息</p>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item style="margin-left: 200px">
          <el-button @click="addOrUpdateHandle(form.id)" icon="el-icon-edit" type="primary">修改信息</el-button>
        </el-form-item>
        <el-form-item label="用户账号">
          <el-input v-model="form.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户姓名">
          <el-input v-model="form.userName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-input v-model="form.userSex" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户年龄">
          <el-input v-model="form.userAge" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="form.userHobby" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户学历">
          <el-input v-model="form.userEdu" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="注册时间">
          <el-input v-model="form.createTime" :disabled="true"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="AD">
      <img src="../../../../public/userinfo_bg.png" alt="">
    </div>
    <div class="createComplain">
      <el-button style="width: 120px;height: 100px;font-size: 20px" type="warning" @click="complainVisible = true">
        发起投诉
      </el-button>
    </div>
    <el-dialog :visible.sync="complainVisible" title="发起投诉">
      <el-form :model="complainForm">
        <el-form-item label="投诉时间" prop="complainTime">
          <el-date-picker v-model="complainForm.complainTime" type="datetime" placeholder="选择时间"
                          value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item label="问题描述" prop="problem">
          <el-input type="textarea" v-model="complainForm.problem" placeholder="描述您要投诉的内容"></el-input>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="complainVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="newComplain">{{ $t('confirm') }}</el-button>
      </template>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './dhuserinfo-add-or-update'

export default {
  mixins: [mixinViewModule],
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/demo/dhuserinfo/page',
        getDataListIsPage: true,
        exportURL: '/demo/dhuserinfo/export',
        deleteURL: '/demo/dhuserinfo',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      },
      form: {
        id: '',
        userName: '',
        userSex: '',
        userAge: '',
        userHobby: '',
        userEdu: '',
        createTime: ''
      },
      complainForm: {
        userId: '',
        complainTime: '',
        problem: ''
      },
      complainVisible: false
    }
  },
  created() {
    this.getCLOUusername()
  },
  methods: {
    getCLOUusername() {
      this.$http.get(`/sys/user/getCLOUusername/${this.$store.state.user.id}`).then(({data: res}) => {
        this.getUserInfo(res.data.username);
      }).catch(() => {
      })
    },
    getUserInfo(username) {
      this.$http.get(`demo/dhuserinfo/` + username).then(({data: res}) => {
        this.form.id = res.data.id;
        this.complainForm.userId = res.data.id;
        this.form.userName = res.data.userName;
        this.form.userSex = res.data.userSex;
        this.form.userAge = res.data.userAge;
        this.form.userHobby = res.data.userHobby;
        this.form.userEdu = res.data.userEdu;
        this.form.createTime = res.data.createTime;
        if (res.data.userSex === 1) {
          this.form.userSex = "女";
        } else if (res.data.userSex === 0) {
          this.form.userSex = "男";
        }
      }).catch(() => {
      })
    },
    newComplain() {
      this.$http.post(`demo/dhcomplaininfo/newComplain`, this.complainForm).then(({data: res}) => {
        this.complainVisible = false;
        this.$message({
          type: 'success',
          message: '投诉成功！'
        })
      }).catch(() => {
      })
    }
  },
  components: {
    AddOrUpdate
  }
}
</script>

<style scoped>
.userinfo {
  margin-left: 550px;
  width: 400px;
  position: absolute;
}

.AD {
  margin-left: 20px;
  width: 454px;
  height: 598px;
  position: absolute;
}

.createComplain {
  margin-left: 1080px;
  width: 100px;
  height: 100px;
}
</style>